<template>

    <a-space direction="vertical" size="large" :style="{marginLeft:'74%',marginTop:'30px'}">

        <a-input-search :style="{width:'320px'}" v-model="searchText" placeholder="输入账号或邮箱、学校查询用户" search-button
                        @search="search">
            <template #button-icon>
                <icon-search/>
            </template>
            <template #button-default>
                搜索
            </template>
        </a-input-search>
    </a-space>

    <a-table :data="data" size="medium" style="margin-top: 20px;width: 90%;margin-left: 100px"
             :virtual-list-props="{height:500}" :columns="columns"
             :pagination="false"
    >
        <template #columns>
            <a-table-column title="用户ID" data-index="id"></a-table-column>
            <a-table-column title="账号" data-index="username"></a-table-column>
            <a-table-column title="用户权限" data-index="userRole"></a-table-column>
            <a-table-column title="性别" data-index="gender"></a-table-column>
            <a-table-column title="年龄" data-index="age"></a-table-column>
            <a-table-column title="邮箱" data-index="email"></a-table-column>
            <a-table-column title="学校" data-index="school"></a-table-column>
            <a-table-column title="注册时间" data-index="createTime"></a-table-column>
            <a-table-column title="账号状态" data-index="isDelete"></a-table-column>
            <a-table-column title="操作">
                <template #cell="{ record }">
                    <a-button  @click="handleClickChange(record.id)"
                              style="margin-right: 10px" type="primary">变更权限
                    </a-button>

                    <a-button style="margin-top: 5px" status="danger" @click="handleClickDelete(record.id)">删除用户</a-button>

                </template>

            </a-table-column>
        </template>
    </a-table>

</template>

<script setup>

    import {reactive, watch, inject} from 'vue'
    import message from "@arco-design/web-vue/es/message";
    import {ref} from "@vue/reactivity";
    import myAxios from '../plugins/myAxios';
    import {useRoute} from "vue-router";
    import {useRouter} from "vue-router";
    import {onMounted, watchEffect} from "@vue/runtime-core";
    import {getCurrentUser} from "@/services/user";
    import { Modal } from '@arco-design/web-vue';


    const userList = ref([])
    onMounted(async () => {

        //获取帖子列表
        const res = await myAxios.get("/user/all")
        if (res?.code === 0) {
            userList.value = res.data;

        } else {
            message.error('请求失败！')
        }

    })

    const data = ref([])
    watch(() => userList, (newValue, oldValue) => {
            if (newValue?.value) {
                data.value = newValue?.value.map((_, index) => ({

                    id: newValue.value[index].id,
                    username: newValue.value[index].username,
                    userRole: newValue.value[index].userRole==0?'普通用户':'管理员',
                    gender: newValue.value[index].gender==0?'男':'女',
                    age: newValue.value[index].age,
                    email: newValue.value[index].email,
                    school: newValue.value[index].school,
                    createTime: newValue.value[index].createTime,
                    isDelete: newValue.value[index].isDelete==1?'已注销':'正常'

                    })
                )

            }
        }, {immediate: true, deep: true}
    )

    const handleClickDelete = (id) => {
        Modal.confirm({
            title: '删除用户',
            content: '你确定删除该用户吗？',

            okText: "确定" ,
            cancelText: "取消",
            onOk() {
                // 处理确定按钮点击事件
                deleteUser(id)
            },
            onCancel() {
                // 处理取消按钮点击事件
                console.log('取消按钮被点击');
            },
            draggable: true,


        });
    };


    const handleClickChange = (id) => {

        Modal.confirm({
            title: '变更用户权限',
            content: '你确定要更改用户权限吗？',
            okText: "确定" ,
            cancelText: "取消",
            onOk() {
                // 处理确定按钮点击事件
                updateUser(id)
            },
            onCancel() {
                // 处理取消按钮点击事件
                console.log('取消按钮被点击');
            },
            draggable: true,
        });
    };


    const deleteUser=async (id)=>{
            const res = await myAxios.post('/user/delete',{
                id
            });
            //后端返回的code是0,则获取到了用户的信息，然后返回
            if (res.code === 0) {

                message.success("删除成功！")
                location.reload()
            } else {
                message.error('删除失败！' + res.description ? `${res.description}` : '')

            }

    }

    const updateUser=async (id)=>{

        const res = await myAxios.post('/user/change',{
            id
        });
        //后端返回的code是0,则获取到了用户的信息，然后返回
        if (res.code === 0) {
            message.success("修改成功！")
            location.reload()
        } else {
            message.error('修改失败！' + res.description ? `${res.description}` : '')

        }

    }

    const searchText=ref('')
    //用关键词查询帖子
    const search=async ()=>{
        const res = await myAxios.get("/user/search", {
            params: {
                searchText: searchText.value
            },
        })
        if (res?.code === 0) {
            userList.value = res.data;
        } else {
            message.error(res.description ? `${res.description}` : '请求失败！')
        }
    }


</script>

<style scoped>

</style>